import Vue from 'vue'
import App from './App.vue'
import Vuex from 'vuex'

import router from './router'
// import 'element-ui/lib/theme-chalk/index.css'

import ElementUI from "element-ui";
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI);
Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    count: 0,
    todos: [
      { id: 1, text: '...', done: true },
      { id: 2, text: '...', done: false }
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done === false)
    },
    doneTodosCount: (state, getters) => {
      return getters.doneTodos.length
    },
    getTodoById: (state) => (id) => {
      return state.todos.find(todo => todo.id === id)
    }
  },
  mutations: {
    increment(state, payload) {
      console.log(payload);
      state.count += payload.amount;
    }
  },
  actions: {
    incrementAsync({ commit }) {
      commit('increment', { amount: 1 });
      setTimeout(() => {
        // state.count++;
        commit('increment', { amount: 3 });
      }, 1000);

    }
  }
});

store.commit('increment', { amount: 5 });

Vue.config.productionTip = false

new Vue({
  store,
  router,
  render: h => h(App),
}).$mount('#app')

